<template>
  <div class="sidebar">
    <div class="personalInfor">
      <!-- 后面需要替换为实际照片，且需要增加照片的上传替换头像 -->
      <div class="headPortrait">
        <el-image
          :src="userPic"
          :preview-src-list="srcList"
          fit="cover"
          hide-on-click-modal
        />
      </div>
      <div class="space_nickname">
        <p class="personalName" title="info.username">{{ info.username }}</p>
      </div>
      <div class="space_opt">
        <a class="manageBtn">账号管理</a>
        <a class="manageBtn manageBtnCode">输入邀请码</a>
      </div>
    </div>
    <el-menu :default-active='defaultActive' class="user-menu">
      <el-menu-item class="menu-item" index="1" @click="goHome()">
        <!-- 可以插播公告，也可以作为一些学习数据显示 -->
        <el-icon><location /></el-icon>
        <span class="title">首页</span>
      </el-menu-item>
      <el-menu-item class="menu-item" index="2" @click="expand()">
        <!-- 个人所加的 -->
        <el-icon><location /></el-icon>
        <span>课程</span>
      </el-menu-item>
      <el-menu-item class="menu-item" index="3" @click="expand()">
        <!-- 用于“站内”通信 -->
        <el-icon><bell-filled /></el-icon>
        <span>讨论</span>
      </el-menu-item>
      <el-menu-item class="menu-item" index="4" @click="expand()">
        <!-- 用于“站内”通信 -->
        <el-icon><apple /></el-icon>
        <span>收件箱</span>
      </el-menu-item>
      <el-menu-item class="menu-item" index="5" @click="goInfor()">
        <!-- 用于“站内”通信 -->
        <el-icon><UserFilled /></el-icon>
        <span>个人信息</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script >
import mitt from "@/plugins/mitt";
import { mapGetters ,mapActions ,mapMutations } from "vuex";
export default {
  // 数据源
  data() {
    return {
      pathIndexMap:{
        "/user/center/information":"5",
        "/space":"1",
      },
      // 登录用户为学生（普通用户）
      studentMenu: [
        {
          name: "",
          title: "首页",
        },
        {
          name: "",
          title: "课程",
        },
        {
          name: "",
          title: "收件箱",
        },
        {
          name: "",
          title: "讨论",
        },
      ],
      // 登录用户为老师
      teacherMenu: [],
      // 登录用户为学校管理员
      adminOfSchool: [],
      // 登录用户为最高管理员
      admin: [],
      currentMenu: [],
      srcList:[],
      defaultActive:1
    };
  },
  created() {
    this.defaultActive=this.pathIndexMap[this.$route.path]
    if(this.userPic=='')
     {
      this.userPic='/img/3uqiY3.jpg'
      this.srcList.push(this.userPic)
     } 
    mitt.on("changeAvatar",(url)=>{
      this.$store.commit('changeHeader',url)
      this.srcList.pop()
      this.srcList.push(url)
    })
  },
  watch:{
    $route:{
      handler:function(val,oldVal)
      {
        this.defaultActive=this.pathIndexMap[val.path]
      },
      deep:true
    }
  },
  //生命周期函数---
  mounted() {},
  //基本方法
  methods: {
    goHome() {
      this.$router.push({
        path: "/space",
      });
    },
    goInfor() {
      this.$router.push({
        path: "/user/center/information",
      });
    },
    expand() {
      alert("扩展模块");
    },
    ...mapActions({
      refresh:'refreshUserMessage'
    })
  },
  //计算类型方法和其他方法的区别：有缓存。以内存换时间，适用于频繁使用的计算
  computed: {
    ...mapGetters({
      info: "getNamePic",
      userPic:'getPic'
    }),
  },
};
</script>

<style   scoped>
.sidebar {
  padding-left: 35%;
  width: 270px;
}
.personalInfor {
  /* // 背景图片，后期改成透明素色调
  // background: url("../assets/images/cj2.jpg") no-repeat #faf7f5 bottom center; */
  padding-top: 15px;
  text-align: center;
  background: rgb(255, 255, 255);
  margin-top: 10%;
}
.headPortrait {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  overflow: hidden;
  margin: 0 auto;
}
img {
  display: inline-block;
  vertical-align: middle;
}

.personalName {
  font-size: 18px;
  height: 44px;
  line-height: 44px;
  margin-top: 0px;
}
p {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.space_opt {
  margin-top: 0px;
}
.manageBtn {
  display: inline-block;
  padding: 0 10px;
  height: 26px;
  width: 74px;
  border-radius: 20px;
  line-height: 26px;
  color: #faa046;
  font-size: 14px;
  border: 1px solid #faa046;
  margin-bottom: 20px;
  cursor: pointer;
}
.manageBtn:hover {
  background-color: #faa046;
  color: #ffff;
}
.manageBtnCode {
  border: 1px solid #50b8fd;
  color: #50b8fd;
  margin-left: 10px;
  margin-bottom: 20px;
}
.manageBtnCode:hover {
  background-color: #50b8fd;
  color: #ffff;
}
.user-menu {
  width: 100%;
}
.menu-item {
  display: flex;
  text-align: center;
  justify-content: center;
}
</style>